import React, { Component } from 'react'

import "./index.css"

const MyContext = React.createContext()
const { Provider, Consumer } = MyContext
export default class A extends Component {
    state = { name: "tom", age: "18" }
    render() {
        const { name, age } = this.state;
        return (
            <div className="parent">
                <h1>我是A组件</h1>
                <h3>我的用户名是：{name}</h3>
                <Provider value={{ name, age }}>
                    <B />
                </Provider>
            </div>
        )
    }
}
class B extends Component {
    render() {
        return (
            <div className="child">
                <h1>我是B组件</h1>
                <C />
            </div>
        )
    }
}
// class C extends Component {
//     // 声明接收 context
//     static contextType = MyContext
//     render() {
//         // console.log()
//         console.log(this.context)
//         const {name,age} = this.context;
//         return (
//             <div className="grand">
//                 <h1>我是C组件</h1>
//                 <h3>我在A组件接收到的参数是：{name},年龄是{age}</h3>
//             </div>
//         )
//     }
// }

function C() {
    return (
        <div className="grand">
            <h1>我是C组件</h1>
            <h4>我在A组件接收到的参数是：
                <Consumer>
                    {value => `用户名:${value.name},年龄：${value.age}`}    
                </Consumer>    
            </h4>
        </div>
    )
}